<template>
    <div>
        计数器：{{$store.state.counter.count}}，{{count}} <button type="button" @click="increment">+</button>
        购物车数量：{{$store.state.cart.count}}<button type="button" @click="cartIncrement">+</button>
        <ul>
            <li v-for="item in getUsers" :key="item.id">{{item.name}}-{{item.age}}</li>
        </ul>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapMutations,mapActions} from "vuex";
  export default {
    name: 'counter',
    created(){
      console.log(this.$store.state.counter.count);
      console.log(this.getUsers);
    },
    computed:{
      ...mapState({
        count:state=>state.counter.count
        // count:"count",2
        // count:["count"]
        // count(state){
        //   return state.counter.count
        // }
      }),
      //数组字符串
      // ...mapGetters(['getUsers']),
      ...mapGetters({
        getUsers:"counter/getUsers"
      })
    },
    methods:{
      //对象形式
      ...mapMutations({
        inc:"counter/inc",
        cartInc:"cart/inc"
      }),
      //数组形式
      // ...mapMutations(['inc']),
      ...mapActions({
        asyncInc:"asyncInc"
      }),
      // ...mapActions(['asyncInc']),
      increment(){
        //载荷提交
        // this.$store.commit("inc",{amount:10});
        //对象形式的提交
        // this.$store.commit({
        //   type:"inc",
        //   amount:10
        // })
        this.inc({amount: 10});
        //载荷分发
        // this.$store.dispatch("asyncInc",{amount:10})
        //对象分发
        // this.$store.dispatch({
        //   type:"asyncInc",
        //   amount:10
        // })
        // this.asyncInc({amount:10})
      },
      cartIncrement(){
        this.cartInc({amount:1})
      }
    }
  };
</script>

<style scoped>

</style>
